<template>
  <!-- 个人分配 -->
  <section class="component message-bution">
    <data-box :data="dataSet" ref="data-box">
      <template>
        <div>
          共选择<span class="case-count">{{caseIds.length}}</span>条案件
        </div>
      </template>
      <template slot="columns">
        <el-table-column prop="userName" label="用户名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="realName" label="催收员" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column label="确认分配案件数" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.num" :min="0" :max="caseIds.length" :precision="0"  @blur="onNumBlur"></el-input>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <div style="text-align:center;margin-top:30px;">
      <el-button @click="emitBack">上一步</el-button>
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

import { Dependencies } from '~/core/decorator';
import { Prop, Emit, Watch } from 'vue-property-decorator';
import { RepairCasesService } from '~/services/domain-service/repair-cases.service';
import { namespace, Getter } from "vuex-class";
const AllotModule = namespace("case-allot")
@Component({
  components: {
    
  },
})
export default class MessageBution extends Vue {
  @Dependencies(RepairCasesService) private repairCasesService: RepairCasesService;
  @AllotModule.State private caseIds;
  @Prop()
  private display: any
  private dataArray: any = {}

  /**
   * table数据源
   */
  private dataSet: any[] = [];

  /**
   * 首次打开执行
   */
  private refreshData() {
    this.display.forEach(x => x.num = 0)
    this.dataSet = this.display
  }

  @Emit("success")
  private emitSuccess() {
    this.dataSet = []
  }

  @Emit("back")
  private emitBack() {
  }

  @Emit("close")
  private emitClose() {
  }

  /**
   * 输入验证
   */
  private onNumBlur(e) {
    if (e.target.valueAsNumber > this.caseIds.length) {
      this.$message.error(e.target.validationMessage);
    } else {
      const alreadySum = this.dataSet.reduce(
        (a, c) => a + Number.parseInt(c.num || "0"),
        0
      );
      if (alreadySum > this.caseIds.length) {
        this.$message.error("输入数量不能大于选中分案数量");
      }
    }
  }

  /**
   * 确定分配
   */
  private submit() {
    this.dataArray.distributeNumber = this.dataSet.map((v) => v.num)
     const alreadySum = this.dataSet.reduce(
        (a, c) => a + Number.parseInt(c.num || "0"),
        0
      );
    if (alreadySum > this.caseIds.length) {
        this.$message.error("输入数量不能大于选中分案数量");
        return
      }
    this.dataArray.caseIds = this.caseIds
    this.dataArray.userIds = this.dataSet.map((v) => v.id)
    this.dataArray.deptIds = this.dataSet.map((v) => v.deptId)
    this.dataArray.distributeCategory = "TO_COLLECTOR"

    this.repairCasesService.confirmDistributeCase(this.dataArray).subscribe((data) => {
      this.$message.success('操作成功')
      this.emitClose()
    })
  }
}
</script>
<style lang="less" scoped>
.component.message-bution{
  .case-count{
display:inline-block;
    padding: 0 4px;
    font-weight: bold;
  }
}

</style>
